import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom';
import TakeOut from '@/page/take-out';
import Home from '@/page/home';
import NotFound from '@/page/404';
import 'normalize.css';
import StatusView from '@/components/StatusView';

function App() {
  const routes = [
    {
      path: '/',
      element: <Home />,
    },
    {
      path: '/takeout',
      element: <TakeOut />,
    },
    // {
    //   path: '/user/:id',
    //   element: <User />,
    //   children: [
    //     {
    //       path: '/',
    //       element: <UserProfile />,
    //     },
    //     {
    //       path: 'posts',
    //       element: <UserPosts />,
    //     },
    //   ],
    // },
    {
      path: '*',
      element: <NotFound />,
    },
  ];
  return <Suspense fallback={<StatusView status="loading" />}>{useRoutes(routes)}</Suspense>;
}

export default App;
